<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>购物车</title>
		<link rel="stylesheet" href="./css/ydui.rem.css" />
		<link rel="Shortcut Icon" href="./img/favicon-20191231054058871.ico" type="image/x-icon" />
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			body,
			html,
			#app {
				width: 100%;
				height: 100%;
				background-color: #FFFFFF;
				position: relative;
			}
			/* 表头 */
			.cart-navt {
				width: 100%;
				height: 40px;
				color: #FFFFFF;
				font-size: 0.35rem;
				text-align: center;
				line-height: 40px;
				background-color: #F49518;
			}
			.goods{
				padding-bottom: 108px;
			}
			.mercha {
				width: 90%;
				margin-left: 5%;
				/* height: 2.7rem; */
				display: flex;
				border-bottom: 1px solid #E7E7E7;
				position: relative;
			}
			.logs-img {
				width: 20%;
				height: 1.2rem;
				margin-top: 10px;
				margin-bottom: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.logs-img>img {
				display: block;
				max-width: 100%;
				max-height: 100%;
				background-size: cover;
			}
			.xwl-hangao{
				width: 50%;
			}
			/* 商品名称 */
			.goods-name {
				font-size: 0.3rem;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
				margin-top: 16px;
			}
			
			.goods-price {
				font-size: 0.25rem;
				color: #E61B30;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
			}
			.shangping{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			/* 加减数量 */
			.x-sp{
				display: inline-block;
				width: 25px;
				height: 25px;
				font-size: 16px;
				border: 1px solid #E6E6E6;
				text-align: center;
				line-height: 25px;
			}
			.shuliang{
				width: 25px;
				height: 25px;
				font-size: 16px;
				line-height: 25px;
				text-align: center;
				border-top: 1px solid #E6E6E6;
				border-bottom: 1px solid #E6E6E6;
			}
			/* 底部结算 */
			.xwl-cart{
				width: 90%;
				height: 1.1rem;
				display: flex;
				align-items: center;
				margin-left: 5%;
				margin-right: 5%;
				position: relative;
				margin-top: 10px;
			}
			.heji-sp{
				font-size: 14px;
				color: #999999;
			}
			.heji-jia{
				font-size: 14px;
				color: #EF4F4F;
			}
			.settlement{
				width: 60px;
				height: 0.8rem;
				font-weight: bold;
				background-color: #F49518;
				color: #FFFFFF;
				font-size: 0.26rem;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 0.15rem;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="cart-navt">
				<span>购物车</span>
			</div>
			<div class="goods">
				<div class="mercha" v-for="(sujbt,index) in sujbts" :key="index">
					<div class="logs-img">
						<img :src="sujbt.picture" />
					</div>
					<div class="xwl-hangao">
						<p class="goods-name">{{sujbt.name}}</p>
						<p class="goods-price">￥{{sujbt.price}}</p>
					</div>
					<!-- 增加商品 -->
					<div class="shangping">
						<span class="x-sp">+</span>
						<span class="shuliang">1</span>
						<span class="x-sp">-</span>
					</div>
				</div>
			</div>
			<!-- 结算 -->
			<div style="width: 100%; position: fixed; bottom: 48px; left: 0; background-color: #FFFFFF; border-top: 1px solid #E7E7E7;">
				<div class="xwl-cart">
					<p>
						<span class="heji-sp">合计：</span>
						<span class="heji-jia">￥0.00</span>
					</p>
					<p class="settlement">去结算</p>
				</div>
			</div>
			<!-- 底部导航 -->
			<yd-tabbar fixed active-color="#F49518">
				<yd-tabbar-item title="首页" link="shoping_cart.html" type="a">
					<yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
				</yd-tabbar-item>
				<yd-tabbar-item title="购物车" link="cart.html" active type="a">
					<yd-icon name="shopcart" slot="icon" size="0.54rem"></yd-icon>
				</yd-tabbar-item>
				<yd-tabbar-item title="个人中心" link="myine.html" type="a">
					<yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
				</yd-tabbar-item>
			</yd-tabbar>
		</div>
		<!-- 引入 Vue -->
		<script src="./js/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="./js/ydui.rem.js"></script>
		<!-- 引入rem自适应类库 -->
		<script src="./js/ydui.flexible.js"></script>
		<script src="./js/axios.js"></script>
		<script src="js/cookie.min.js"></script>
		<script>
			new Vue({
				el: '#app',
				data() {
					return {
						sujbts: [],
						sujbtsArr: []
					}
				},
				methods: {

				},
				created() {
					var itemd = localStorage.getItem("weekDay");
					this.sujbts = JSON.parse(itemd);
					console.log(JSON.parse(localStorage.getItem("weekDay")))
					// this.sujbts_to = Cookies.set("xwlstorage",this.sujbts,{ expires: 7 });
					// console.log(Cookies.get("xwlstorage"));
				},
				mounted() {

				}
			})
		</script>
	</body>
</html>
